<template>
  <div>
    <div class="main_spac1" v-loading="loading">
      <!-- 日期选择 -->
      <div class="time_change">
        <change-date
          title="配送日期"
          @getdate="getdate"
          ref="time_change_ref"
        ></change-date>
      </div>
      <!-- 顶部报表 -->
      <div class="top">
        <div class="top-item">
          <p>{{ sales_data.order_unit.avg_money || 0 }}</p>
          <p>平均订单价</p>
        </div>
        <div class="top-item">
          <p>{{ sales_data.order_unit.avg_company_money || 0 }}</p>
          <p>平均客单价</p>
        </div>
        <div class="top-item">
          <p>{{ sales_data.order_unit.order_num }}</p>
          <p>订单数量</p>
        </div>
        <div class="top-item">
          <p>{{ sales_data.order_unit.order_money }}</p>
          <p>下单金额</p>
        </div>
        <div class="top-item">
          <p>
            {{
              sales_data.order_unit.send_money
                ? $toFixed(parseFloat(sales_data.order_unit.send_money))
                : 0.0
            }}
          </p>
          <p>配送金额</p>
        </div>
        <div class="top-item">
          <p>{{ sales_data.order_unit.return_money }}</p>
          <p>退货金额</p>
        </div>
      </div>
      <!-- 中间 -->
      <div class="main">
        <div class="left">
          <div class="left_item">
            <p class="title">用户</p>
            <div class="left_item_content">
              <div>
                <p>用户数量</p>
                <p>{{ sales_data.company_all }}</p>
              </div>
              <div>
                <p>未下单数量</p>
                <p>{{ sales_data.company_un }}</p>
              </div>
              <div>
                <p>已下单数量</p>
                <p>{{ sales_data.company_ed }}</p>
              </div>
              <div>
                <p>下单占比</p>
                <p>{{ sales_data.company_rate }}%</p>
              </div>
            </div>
          </div>
          <div class="left_item">
            <p class="title">商品</p>
            <div class="left_item_content">
              <div>
                <p>SKU数量</p>
                <p>{{ sales_data.goods_all }}</p>
              </div>
              <div>
                <p>未下单数量</p>
                <p>{{ sales_data.goods_un }}</p>
              </div>
              <div>
                <p>已下单数量</p>
                <p>{{ sales_data.goods_ed }}</p>
              </div>
              <div>
                <p>下单占比</p>
                <p>{{ sales_data.goods_rate }}%</p>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="common_title">
            <p>营业曲线</p>
            <div class="titlechange">
              <el-select
                v-model.trim="bussiness"
                size="mini"
                class="wid80"
                @change="(val) => typechange(val, 1)"
              >
                <el-option
                  v-for="(item, index) in bussiness_list"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div id="chartColumn1" style="width: 100%; height: 255px">
            <echart-line
              idname="sales_line"
              :datalist="cahrt_sales_line"
            ></echart-line>
          </div>
        </div>
      </div>

      <!-- 底部报表 -->
      <div class="bottom">
        <div class="left">
          <div class="common_title">
            <p>SKU TOP5</p>
            <div class="titlechange">
              <el-select
                v-model.trim="sku_top5"
                size="mini"
                class="wid80"
                @change="(val) => typechange(val, 2)"
              >
                <el-option
                  v-for="(item, index) in sku_top5_list"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div style="width: 100%; height: 220px">
            <echart-barsimple
              idname="chartColumn_bottom1"
              :datalist="chart_sku_top5"
            ></echart-barsimple>
          </div>
        </div>
        <div class="middle">
          <div class="common_title">
            <p>用户 TOP5</p>
            <div class="titlechange">
              <el-select
                v-model.trim="user_top5"
                size="mini"
                class="wid80"
                @change="(val) => typechange(val, 3)"
              >
                <el-option
                  v-for="(item, index) in bussiness_list"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div style="width: 100%; height: 220px">
            <echart-barsimple
              idname="chartColumn_bottom2"
              :datalist="chart_user_top5"
            ></echart-barsimple>
          </div>
        </div>
        <div class="right">
          <div class="common_title">
            <p>各大类占比</p>
            <div class="titlechange">
              <el-select
                v-model.trim="sort_percent"
                size="mini"
                class="wid80"
                @change="(val) => typechange(val, 4)"
              >
                <el-option
                  v-for="(item, index) in sku_top5_list"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div style="width: 100%; height: 220px">
            <echart-pie
              idname="chartColumn_bottom3"
              :datalist="cahrt_category_percent"
            ></echart-pie>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import changeDate from "./components/changeDate.vue";
import echarts from "echarts";
import { EleResize } from "@/utils/esresize.js";
import EchartLine from "./components/echartLine.vue";
import EchartBarsimple from "./components/echartBarsimple.vue";
import EchartPie from "./components/echartPie.vue";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { get_sale_chart } from "@/api/report/index";
import {
  parseTime,
} from "@/utils/index";
export default {
  components: { changeDate, EchartLine, EchartBarsimple, EchartPie },
  data() {
    return {
      parseTime,
      loading: true,
      //营业曲线
      bussiness_list: [
        {
          id: 1,
          name: "配送金额",
        },
        {
          id: 2,
          name: "订单数量",
        },
      ],
      bussiness: 1,
      // sku top5
      sku_top5_list: [
        {
          id: 1,
          name: "配送金额",
        },
        {
          id: 2,
          name: "配送数量",
        },
      ],
      sku_top5: 1,
      // 用户top5
      user_top5: 1,
      //各大类占比
      sort_percent: 1,
      sales_data: {
        order_unit: [],
      },
      //日期
      date: "",
      date_type: "1",
      // skutop5
      chart_sku_top5: {
        title: [],
        data: [],
        series: {
          name: "配送金额",
        },
      },
      // 用户top5
      chart_user_top5: {
        title: [],
        data: [],
        series: {
          name: "配送金额",
        },
      },
      // 营业曲线
      cahrt_sales_line: {
        title: [],
        data: [],
        series: {
          name: "配送金额",
        },
      },
      // 各大类占比
      cahrt_category_percent: {
        data: [],
        series: {
          name: "配送金额",
        },
      },
    };
  },
  watch: {
    date() {
      // this.loading = true;
      // this.get_sale_chart();
    },
  },
  methods: {
    // 获取报表数据
    get_sale_chart() {
      this.loading = true;
      this.date = this.$refs["time_change_ref"].$data.date;
      this.date_type = this.$refs["time_change_ref"].$data.type;

      let params = {
        start_time: this.date[0],
        end_time: this.date[1],
        date_type: this.date_type,
        // start_time: "2020-11-01",
        // end_time: "2020-12-25",
      };
      this.bussiness = 1;
      this.sku_top5 = 1;
      this.user_top5 = 1;
      this.user_top5 = 1;
      this.sort_percent = 1;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        params
      );

      get_sale_chart(data).then((res) => {
        this.loading = false;
        if (res.errcode == 0) {
          this.sales_data = res.data;
          // 重置
          this.chart_user_top5.title = [];
          this.chart_user_top5.data = [];
          this.chart_sku_top5.title = [];
          this.chart_sku_top5.data = [];
          this.cahrt_sales_line.data = [];
          this.cahrt_sales_line.title = [];
          this.cahrt_category_percent.data = [];
          if (
            this.sales_data.company_money &&
            this.sales_data.company_money.length
          ) {
            this.sales_data.company_money.map((item) => {
              this.chart_user_top5.title.push(item.company_name);
              this.chart_user_top5.data.push(item.send_money);
            });
          }
          if (
            this.sales_data.goods_money &&
            this.sales_data.goods_money.length
          ) {
            this.sales_data.goods_money.map((item) => {
              this.chart_sku_top5.title.push(item.goods_name);
              this.chart_sku_top5.data.push(item.send_money);
            });
          }
          for (let key in this.sales_data.order_data) {
            this.cahrt_sales_line.title.push(
              this.sales_data.order_data[key].date
            );
            this.cahrt_sales_line.data.push(
              this.sales_data.order_data[key].send_money
            );
          }

          // if (
          //   this.sales_data.category_money &&
          //   this.sales_data.category_money.length
          // ) {
          //   this.sales_data.category_money.map((item) => {
          //     var obj = {
          //       name: item.category_name,
          //       value: parseFloat(item.send_money).toFixed(2),
          //     };
          //     this.cahrt_category_percent.data.push(obj);
          //   });
          // }
          for (let key in this.sales_data.category_data) {
            var obj = {
              name: this.sales_data.category_data[key].category_name,
              value: this.sales_data.category_data[key].profit_money,
            };
            this.cahrt_category_percent.data.push(obj);
          }
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 获取时间
    getdate(val) {
      this.get_sale_chart();
    },
    // 下拉选择
    typechange(val, type) {
      switch (type) {
        case 1:
          // 曲线
          if (val == 1) {
            this.cahrt_sales_line.data = [];
            this.cahrt_sales_line.title = [];
            for (let key in this.sales_data.order_data) {
              this.cahrt_sales_line.title.push(
                this.sales_data.order_data[key].date
              );
              this.cahrt_sales_line.data.push(
                this.sales_data.order_data[key].send_money
              );
            }
            this.cahrt_sales_line.series.name = "配送金额";
          } else if (val == 2) {
            this.cahrt_sales_line.data = [];
            this.cahrt_sales_line.title = [];
            for (let key in this.sales_data.order_data) {
              this.cahrt_sales_line.title.push(
                this.sales_data.order_data[key].date
              );
              this.cahrt_sales_line.data.push(
                this.sales_data.order_data[key].order_num
              );
            }
            this.cahrt_sales_line.series.name = "订单数量";
          }
          break;
        case 2:
          // sku
          this.chart_sku_top5.title = [];
          this.chart_sku_top5.data = [];
          if (val == 1) {
            this.sales_data.goods_money.map((item) => {
              this.chart_sku_top5.title.push(item.goods_name);
              this.chart_sku_top5.data.push(item.send_money);
            });
            this.chart_sku_top5.series.name = "配送金额";
          } else if (val == 2) {
            this.sales_data.goods_num.map((item) => {
              this.chart_sku_top5.title.push(item.goods_name);
              this.chart_sku_top5.data.push(item.send_num);
            });
            this.chart_sku_top5.series.name = "配送数量";
          }
          break;
        case 3:
          //用户
          this.chart_user_top5.title = [];
          this.chart_user_top5.data = [];
          if (val == 1) {
            this.sales_data.company_money.map((item) => {
              this.chart_user_top5.title.push(item.company_name);
              this.chart_user_top5.data.push(item.send_money);
            });
            this.chart_user_top5.series.name = "配送金额";
          } else if (val == 2) {
            this.sales_data.company_num.map((item) => {
              this.chart_user_top5.title.push(item.company_name);
              this.chart_user_top5.data.push(item.order_num);
            });
            this.chart_user_top5.series.name = "订单数量";
          }
          break;
        case 4:
          // 分类
          this.cahrt_category_percent.data = [];
          if (val == 1) {
            for (let key in this.sales_data.category_data) {
              var obj = {
                name: this.sales_data.category_data[key].category_name,
                value: this.sales_data.category_data[key].profit_money,
              };
              this.cahrt_category_percent.data.push(obj);
            }
            this.cahrt_category_percent.series.name = "配送金额";
          } else if (val == 2) {
            for (let key in this.sales_data.category_data) {
              var obj = {
                name: this.sales_data.category_data[key].category_name,
                value: this.sales_data.category_data[key].profit_num,
              };
              this.cahrt_category_percent.data.push(obj);
            }
            this.cahrt_category_percent.series.name = "配送数量";
          }
          break;
      }
    },
    // 订单路由跳转
    order_see() {
      this.$router.push({
        name: "sales_report_order",
        params: {
          date: this.date,
        },
      });
    },
    // 用户路由跳转
    user_see() {
      this.$router.push({
        name: "sales_report_user",
        params: {
          date: this.date,
        },
      });
    },
    // 商品路由跳转
    goods_see() {
      this.$router.push({
        name: "sales_report_goods",
        params: {
          date: this.date,
        },
      });
    },
  },
  created() {},
  mounted() {
    if(this.$route.query.today) {
    let nowmonth1 = this.parseTime(new Date(), "{y}-{m}-{d}");
    let nowmonth2 = this.parseTime(new Date(), "{y}-{m}-{d}");
      this.$refs.time_change_ref.date = [nowmonth1, nowmonth2]
    }
    this.get_sale_chart();
    
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.time_change {
  background-color: #fff;
  width: 100%;
  height: 66px;
  border-bottom: 1px solid #d6d6d6;
}
.top {
  height: 142px;
  width: 100%;
  background-color: #fff;
  padding: 14px 15px;
  display: flex;
  align-items: center;
  flex-direction: row;
  .top-item {
    height: 100%;
    margin-right: 16px;
    flex: 1;
    border: 1px solid #cbcbcb;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    p {
      &:first-child {
        color: $green;
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 6px;
        letter-spacing: 2px;
      }
      &:last-child {
        color: #8e8e8e;
        font-size: 14px;
        margin-top: 6px;
        cursor: pointer;
      }
    }
  }
}
.main {
  width: 100%;
  height: 328px;
  display: flex;
  flex-direction: row;
  margin-top: 15px;
  .left {
    flex: 1;
    background-color: #fff;
    margin-right: 7px;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    .left_item {
      flex: 1;
      padding: 20px 0 10px 0;
      &:first-child {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      }
      .title {
        text-align: center;
        color: #000000;
        font-size: 16px;
        padding-bottom: 15px;
      }
      .left_item_content {
        display: flex;
        flex-direction: row;
        div {
          flex: 1;
          margin-right: 16px;
          background-color: #f7f9fa;
          height: 94px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          &:hover {
            cursor: pointer;
            box-shadow: 0px 2px 9px 1px rgba(10, 2, 4, 0.29);
          }
          p {
            &:first-child {
              color: #8e8e8e;
              font-size: 16px;
              padding-bottom: 5px;
              padding-left: 5px;
              letter-spacing: 2px;
            }
            &:last-child {
              color: #191919;
              font-size: 23px;
              padding-top: 5px;
            }
          }
        }
      }
    }
  }
  .right {
    flex: 1;
    background-color: #fff;
    margin-left: 8px;
  }
}

.common_title {
  padding: 20px 20px 15px 20px;
  position: relative;
  p {
    color: #8e8e8e;
    font-size: 16px;
    text-align: center;
  }
  .titlechange {
    position: absolute;
    top: 15px;
    right: 20px;
    /deep/.el-input__inner {
      border: none;
    }
    /deep/.wid80 .el-input__inner {
      width: 94px;
    }
  }
}
.bottom {
  display: flex;
  flex-direction: row;
  height: 278px;
  width: 100%;
  margin-top: 15px;
  .left,
  .middle,
  .right {
    flex: 1;
    background-color: #fff;
    height: 100%;
  }
  .middle {
    margin: 0 15px;
  }
}
</style>
